import { defineComponent, ref } from 'vue';
import KeyboardDrawer from './KeyboardDrawer'; // 导入您的键盘组件
import { Button, Card, Input, Space, Typography } from 'ant-design-vue';

const { Title, Paragraph } = Typography;

export default defineComponent({
    setup() {
        // 状态管理
        const showKeyboard = ref(false);
        const inputValue = ref('');
        const inputType = ref<'normal' | 'letter'>('letter');

        // 切换键盘类型
        const toggleType = () => {
            inputType.value = inputType.value === 'normal' ? 'letter' : 'normal';
        };

        // 处理键盘提交
        const handleSubmit = (value: string) => {
            inputValue.value = value;
            console.log('键盘提交的值:', value);
        };

        return () => (
            <div style={{
                maxWidth: '800px',
                margin: '2rem auto',
                padding: '0 1rem'
            }}>
                <Title level={2}>自定义键盘组件演示</Title>

                <Card style={{ marginBottom: '1rem' }}>
                    <Paragraph>
                        这个演示展示了如何使用自定义键盘组件。点击下方按钮打开键盘，
                        可以输入文本并提交。您也可以切换键盘类型（字母模式/数字字母混合模式）。
                    </Paragraph>
                </Card>

                <Card>
                    <div style={{ marginBottom: '1rem' }}>
                        <Title level={4}>输入区域</Title>
                        <Space direction="vertical" size="middle" style={{ width: '100%' }}>
                            <Input
                                v-model={[inputValue.value, 'value']}
                                placeholder="点击下方按钮打开键盘输入"
                                style={{ marginBottom: '1rem' }}
                                readOnly
                            />

                            <Space>
                                <Button
                                    type="primary"
                                    onClick={() => showKeyboard.value = true}
                                >
                                    打开键盘
                                </Button>
                                <Button
                                    type={inputType.value === 'normal' ? 'success' : 'default'}
                                    onClick={toggleType}
                                >
                                    当前模式: {inputType.value === 'normal' ? '数字+字母' : '仅字母'}
                                </Button>
                                <Button
                                    danger
                                    onClick={() => inputValue.value = ''}
                                >
                                    清空输入
                                </Button>
                            </Space>
                        </Space>
                    </div>

                    <div>
                        <Title level={4}>输入结果</Title>
                        <Paragraph>
                            {inputValue.value ? `您输入的内容是: ${inputValue.value}` : '尚未输入任何内容'}
                        </Paragraph>
                    </div>
                </Card>

                {/* 键盘组件 */}
                <KeyboardDrawer
                    modelValue={showKeyboard.value}
                    value={inputValue.value}
                    type="number"
                    onUpdate:modelValue={(value) => showKeyboard.value = value}
                    onUpdate:value={(value) => inputValue.value = value}
                    onKeySubmit={handleSubmit}
                />
            </div>
        );
    },
});
